// 他人主页
<template>
  <div>
    <div class="personalHeader">
      <div class="personalTop"></div>
      <div class="personalBottom">
        <img class="headerImg" :src="urlImg" alt />
        <div class="headerDeatil">
          <div class="headerName">{{ userInfo.name }}</div>
          <div class="headerPosition">
            {{ userInfo.department.title }} | {{ userInfo.position }}
          </div>
          <div class="headerIntroduce">{{ userInfo.autograph }}</div>
        </div>
        <div class="editBtn">
          <el-button
            size="small"
            v-if="!isFollow"
            @click="follow"
            class="collectionBtn"
            >关注</el-button
          >
          <el-button
            size="small"
            v-if="isFollow"
            type="info"
            @click="cancelfollow"
            class="collectionBtns"
            >取消关注</el-button
          >
        </div>
      </div>
    </div>
    <div class="content">
      <div class="left">
        <div class="main">
          <div class="headNav">
            <div
              :class="work == 0 ? 'seletheadNavText' : 'headNavText'"
              @click="work = 0"
            >
              Ta的文章
            </div>
            <div
              :class="work == 1 ? 'seletheadNavText' : 'headNavText'"
              @click="work = 1"
            >
              Ta的创新建议
            </div>
            <div
              :class="work == 2 ? 'seletheadNavText' : 'headNavText'"
              @click="work = 2"
            >
              Ta的资源共享
            </div>
            <div
              :class="work == 3 ? 'seletheadNavText' : 'headNavText'"
              @click="work = 3"
            >
              Ta的提问
            </div>
            <div
              :class="work == 4 ? 'seletheadNavText' : 'headNavText'"
              @click="work = 4"
            >
              Ta的回答
            </div>
            <div
              :class="work == 5 ? 'seletheadNavText' : 'headNavText'"
              @click="work = 5"
            >
              Ta的关注
            </div>
          </div>
          <el-divider></el-divider>
          <div class="work">
            <myInvitation
              :userid="userInfo._id"
              v-if="work == 0"
            ></myInvitation>
            <suggest :userid="userInfo._id" v-if="work == 1"></suggest>
            <resource :userid="userInfo._id" v-if="work == 2"></resource>
            <problem :userid="userInfo._id" v-if="work == 3"></problem>
            <answer :userid="userInfo._id" v-if="work == 4"></answer>
            <myFollow :userid="userInfo._id" v-if="work == 5"></myFollow>
          </div>
        </div>
      </div>
      <div class="right">
        <div class="StatisticsBox">
          <div class="StatisticsList">
            <div class="StatisticsItem">
              <div class="StatisticsName">
                <i class="el-icon-trophy"></i>积分
              </div>
              <div class="StatisticsNum">{{ userStauts.integral }}</div>
            </div>
            <div class="StatisticsItem">
              <div class="StatisticsName">
                <i class="el-icon-edit"></i>发帖数
              </div>
              <div class="StatisticsNum">{{ userStauts.articleNum }}</div>
            </div>
          </div>
          <div class="StatisticsList">
            <div class="StatisticsItem">
              <div class="StatisticsName">
                <i class="el-icon-star-off"></i>评论数
              </div>
              <div class="StatisticsNum">{{ userStauts.commenteNum }}</div>
            </div>
            <div class="StatisticsItem">
              <div class="StatisticsName">
                <i class="el-icon-chat-line-round"></i>回答数
              </div>
              <div class="StatisticsNum">{{ userStauts.answerNum }}</div>
            </div>
          </div>
        </div>
        <div class="footerBox">
          <div class="footNav">
            <span class="footItm" @click="navigationSelect('/home')">首页</span>
            <el-divider direction="vertical"></el-divider>
            <span class="footItm" @click="navigationSelect('/workVoting')"
              >工作投票</span
            >
            <el-divider direction="vertical"></el-divider>
            <span class="footItm" @click="navigationSelect('/resourceSharing')"
              >资料共享</span
            >
            <el-divider direction="vertical"></el-divider>
            <span class="footItm" @click="navigationSelect('/personalCenter')"
              >个人中心</span
            >
          </div>
          <div class="website">
            <span class="footItm">珠海港官网</span>
          </div>
          <div class="website">
            <span
              >Copyright @2009-2015 珠海股份有限公司版权所有
              粤ICP备2001032号-1</span
            >
          </div>
          <div class="website">
            <span>地址:珠海市情侣路南路278号</span>
          </div>
          <div class="website">
            <span>粤公网安备44049002000443号</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { get_follow, post_follow, delete_follow } from "../../api/follow";
import myInvitation from "../../components/OtherPersonal/myInvitation";
import suggest from "../../components/OtherPersonal/suggest";
import resource from "../../components/OtherPersonal/resource";
import problem from "../../components/OtherPersonal/problem";
import answer from "../../components/OtherPersonal/answer";
import myFollow from "../../components/OtherPersonal/myFollow";
import { getSituation } from "../../api/getSituation";
import { get_user_info } from "../../api/user_login";
import { defaultAvatarURL } from "../../utils/global";

export default {
  name: "OtherPersonalCenter",
  data() {
    return {
      work: 0,
      userInfo: {
        department: {
          title: ""
        }
      },
      urlImg: "",
      isFollow: false,
      userStauts: []
    };
  },

  async created() {
    console.log(this.$route.query);
    var userinfo = await get_user_info({
      query: { _id: this.$route.query.user_id },
      populate: JSON.stringify([{ path: "department" }])
    });
    console.log(userinfo);
    this.userInfo = userinfo.data[0];
    this.urlImg = defaultAvatarURL + this.userInfo.head_portrait;
    this.get_followdata();
    this.getSituation();
    if (this.$route.query.work) {
      this.work = parseInt(this.$route.query.work);
    }
  },
  components: {
    myInvitation,
    suggest,
    resource,
    problem,
    answer,
    myFollow
  },
  methods: {
    async get_followdata() {
      var data = {
        query: {
          userid: this.$store.getters.userInfo._id, //用户id
          followid: this.$route.query.user_id //关注者——id
        }
      };
      var follow = await get_follow(data);
      console.log("是否关注该作者", follow);
      if (follow.data.length !== 0) {
        this.isFollow = true;
      } else {
        this.isFollow = false;
      }
    },
    //获取作者状态
    async getSituation() {
      let stauts = await getSituation({ userid: this.$route.query.user_id });
      console.log("stauts", stauts);
      this.userStauts = stauts.data;
    },
    //关注
    async follow() {
      if (this.$store.getters.userInfo._id == this.$route.query.user_id) {
        this.$message({
          message: "无法关注自己喔~",
          type: "warning"
        });
        return;
      }
      var data = {
        userid: this.$store.getters.userInfo._id, //用户id
        followid: this.userInfo._id //关注者——id
      };
      await post_follow(data);
      this.get_followdata();
    },
    //取消关注
    async cancelfollow() {
      var data = {
        query: {
          userid: this.$store.getters.userInfo._id, //用户id
          followid: this.userInfo._id //关注者——id
        }
      };
      await delete_follow(data);
      this.get_followdata();
    },
    navigationSelect(path) {
      this.$router.push(path);
    }
  }
};
</script>

<style lang="scss" scoped>
//头部
.personalHeader {
  min-height: 300px;
  min-width: 1400px;

  width: 100%;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  background-color: #ffffff;
  .personalTop {
    height: 140px;
    background-color: #1d2f70;
  }
  .personalBottom {
    position: relative;
    display: flex;
    height: 160px;
    .headerImg {
      width: 170px;
      height: 170px;
      border-radius: 50%;
      border: 3px solid #ffffff;
      background-color: #cec7c7;
      position: absolute;
      top: -80px;
      left: 80px;
    }
    .headerDeatil {
      width: 560px;
      height: 160px;
      margin: 0 auto;
      .headerName {
        font-size: 20px;
        font-weight: 550;
        margin: 10px 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      .headerPosition {
        font-size: 14px;
        color: #a6a6a6;
        margin: 10px 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      .headerIntroduce {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
        overflow: hidden;
      }
    }
    .editBtn {
      width: 200px;
      height: 160px;
      display: flex;
      align-items: center;
      .collectionBtn {
        background: #1d2f70;
        border: #1d2f70;
        color: #fff;
        padding: 9px 25px;
        &:hover {
          background: rgb(53, 89, 180);
        }
      }
      .collectionBtns {
        padding: 9px 25px;
      }
    }
  }
}
//内容
.content {
  display: flex;
  min-width: 1400px;
  justify-content: space-between;
  margin-top: 20px;
  .left {
    width: 74%;
    min-width: 1000px;
    .main {
      border: 3px solid #ffffff;
      min-height: 600px;
      background-color: #ffffff;
      .work {
        width: 90%;
        margin: 0 auto;
      }
    }
    .headNav {
      display: flex;
      color: #6c6c6c;
      padding-top: 20px;
      .headNavText {
        font-size: 18px;
        margin-right: 25px;
        margin-left: 25px;
        cursor: pointer;
        &:hover {
          color: #1d2f70;
          font-weight: 600;
        }
      }
      .seletheadNavText {
        font-size: 18px;
        margin-right: 25px;
        margin-left: 25px;
        color: #1d2f70;
        font-weight: 600;
        cursor: pointer;
      }
    }
  }

  .right {
    width: 25%;
    .StatisticsBox {
      min-height: 240px;
      background: #fff;
      border-radius: 10px;
      display: flex;
      flex-direction: column;
      justify-content: center;

      .StatisticsList {
        display: flex;
        justify-content: space-around;
        height: 100px;
        align-items: center;
        .StatisticsItem {
          display: flex;
          height: 60px;
          flex-direction: column;
          justify-content: space-around;
          align-items: center;
          color: #505050;
          .StatisticsName {
            font-size: 14px;
          }
          .StatisticsNum {
            font-weight: 550;
            font-size: 18px;
          }
        }
      }
    }
    .footerBox {
      min-height: 180px;
      background: #fff;
      margin-top: 20px;
      border-radius: 10px;
      padding: 20px;
      color: #6c6c6c;
      .footNav {
        width: 290px;
        margin: 0 auto;
      }
      .website {
        text-align: center;
        margin-top: 10px;
      }
      .footItm {
        cursor: pointer;
        &:hover {
          color: #1d2f70;
          font-weight: 600;
        }
      }
    }
  }
}
</style>
